<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="author" content="王劲翔" />
		<title>任务数据</title>
		<link rel="stylesheet" href="./css/missionData.css" />
		<link rel="stylesheet" href="./iconfont/iconfont.css" />
		<script src="./js/flexible.js"></script>
		<script src="./js/moment.js"></script>
		<script src="./js/transform.js"></script>
		<script src="./js/lib/alloyFinger.js"></script>
	</head>
	<body>
		<!-- 顶栏 -->
		<div class="topPreset">
			<a href="javascript:;">
				<span class="iconfont icon-xiangzuo1"></span>
			</a>
			<h2>任务数据</h2>
		</div>

		<!-- 年月显示 -->
		<div class="dateTitle">
			<a class="flexCenter" href="javascript:;">
				<!-- 左箭头 -->
				<span class="iconfont icon-zuojiantou"></span>
				<!-- 日期显示 -->
				<p id="timeYM">2020年2月</p>
				<!-- 右箭头 -->
				<span class="iconfont icon-youjiantou"></span>
			</a>
		</div>

		<!-- 任务目标 -->
		<div class="monthTasks wrapper">
			<!-- 任务信息展示 -->
			<ul class="flexCenter">
				<!-- 任务总量 -->
				<li>
					<p class="num">18</p>
					<p class="text">任务总量</p>
				</li>
				<!-- 完成任务量 -->
				<li>
					<p class="num">16</p>
					<p class="text">完成任务量</p>
				</li>
				<!-- 运输里程 -->
				<li>
					<p class="num">3987</p>
					<p class="text">运输里程(km)</p>
				</li>
			</ul>
		</div>

		<!-- 具体日历 -->
		<div class="calendar wrapper">
			<ul class="titleList">
				<li>
					<p>周日</p>
				</li>
				<li>
					<p>周一</p>
				</li>
				<li>
					<p>周二</p>
				</li>
				<li>
					<p>周三</p>
				</li>
				<li>
					<p>周四</p>
				</li>
				<li>
					<p>周五</p>
				</li>
				<li>
					<p>周六</p>
				</li>
			</ul>
			<ul class="datelist" id="dateList"></ul>
		</div>

		<!-- 遮罩 -->
		<div class="screenMask"></div>

		<!-- ### 选择年月 ### -->
		<div class="selected">
			<!-- 头部区域 -->
			<div class="title">
				<a class="cancel" href="javascript:;">取消</a>
				<p>选择月份</p>
				<a id="yes" href="javascript:;">完成</a>
			</div>
			<!-- 年月列表 -->
			<div class="listbox">
				<div class="titleYM">
					<span>年</span>
					<span>月</span>
				</div>
				<div class="list">
					<ul class="years">
						<li>
							<span>2015</span>
						</li>
						<li>
							<span>2016</span>
						</li>
						<li>
							<span>2017</span>
						</li>
						<li>
							<span>2018</span>
						</li>
						<li>
							<span>2019</span>
						</li>
						<li>
							<span>2020</span>
						</li>
						<li>
							<span>2021</span>
						</li>
						<li>
							<span>2022</span>
						</li>
						<li>
							<span>2023</span>
						</li>
					</ul>
					<ul class="months">
						<li><span>1月</span></li>
						<li><span>2月</span></li>
						<li><span>3月</span></li>
						<li><span>4月</span></li>
						<li><span>5月</span></li>
						<li><span>6月</span></li>
						<li><span>7月</span></li>
						<li><span>8月</span></li>
						<li><span>9月</span></li>
						<li><span>10月</span></li>
						<li><span>11月</span></li>
						<li><span>12月</span></li>
					</ul>
				</div>
			</div>
			<div class="line"></div>
		</div>
		<script src="./js/missionData.js"></script>
	</body>
</html>
